<!--
 * @Description: 
 * @Author: 呆龙
 * @Date: 2023-09-15 11:10:02
 * @LastEditTime: 2023-09-15 11:12:56
 * @LastEditors: 呆龙
-->
<template>
  <a-card>
    <a-button
      type="primary"
      style="float: right"
      @click="showSetCommander = true"
      >设置团长/副团长</a-button
    >
  </a-card>
  <MyTable
    :use-number="true"
    :table-data="tableData"
    :columns="columns"
    :pagination="pagination"
  ></MyTable>
  <MySetCommander
    @setBaseUnion="showSetCommander = false"
    :isShow="showSetCommander"
  />
</template>

<script setup lang="ts">
import MySetCommander from "./setCommander.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { getRepresentativeUser } from "@/api/contingent";
import { PaginationProps } from "ant-design-vue";
import { ref, onMounted } from "vue";
// 页面打开获取数据并赋值给表格
onMounted(() => {
  getRepresentativeUser("1").then((res: any) => {
    tableData.value = res.userList;
  });
});
/**
 * 数据显示表格功能
 * pagination 分页数据
 * tableData 表格数据
 */
const pagination = ref<PaginationProps>({
  current: 1,
  defaultPageSize: 10,
  onChange: page => {
    pagination.value.current = page;
  },
});
const tableData = ref<any[]>([]);
const columns = ref([
  {
    title: "姓名",
    dataIndex: "name",
    isShow: true,
    align: "center",
  },
  {
    title: "工号",
    dataIndex: "workNo",
    isShow: true,
    align: "center",
  },
  {
    title: "工会",
    dataIndex: "union",
    isShow: true,
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "dept",
    isShow: true,
    align: "center",
  },
  {
    title: "身份",
    dataIndex: "identity",
    isShow: true,
    align: "center",
  },
]);
//
const showSetCommander = ref(false);
</script>

<style scoped lang="less">
:deep(.ant-select) {
  width: 100px;
  margin-right: 20px;
}
:deep(.ant-card-body) {
  padding: 20px;
  // display: flex;
}
.flex {
  display: flex;
}
</style>
